<template>
  <div class="main">
    <h2 class="main-index">实验一</h2>
    <p class="main-title">一阶系统的单位脉冲响应</p>
    <p class="sub-title">设一阶系统的传递函数为</p>
    <img class="formula" src="../assets/img/1.png" />
    <p class="sub-title">T为时间常量</p>
    <div class="line-box">
      <p v-for="(item, index) in TArr" :key="index">
        <span>{{item}}</span>
        <span :style="{'background':colorArr[index]}"></span>
      </p>
    </div>
    <div id="mapbox" ref="mapbox"></div>
    <van-field style="margin-bottom: 0.2rem" v-model="TNumber" type="number" center clearable label="T(秒)" placeholder="请输入T值">
      <template #button>
        <van-button size="small" @click="submit" type="primary">提交</van-button>
      </template>
    </van-field>
    <div class="btn-box">
      <a href="javascript:;" @click="showHelp" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">帮助</a>
      <a href="javascript:;" @click="run" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">仿真</a>
      <a href="javascript:;" @click="clearData" class="help miniBtn weui-btn weui-btn_mini weui-btn_primary">清除</a>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { Toast } from 'vant'
import { colorArr } from '../utils/config'
export default {
  name: "onePage",
  data() {
    return {
      TNumber: 0.1, // 输入值
      TArr: [], // 已提交的T值集合
      colorArr,
      myChart: null,
      option: null,
      yAxisType: 'category',
      yAxisArr: [0, 2.5, 5, 7.5, 10],
      xAxisArr: [0, 0.1, 0.2, 0.3, 0.4],
      seriesArr: [] // 计算后的值集合
    };
  },
  methods: {
    initChart() {
      // const tArr = [0.1];
      // const xAxisArr = [0, 0.1, 0.2, 0.3, 0.4];
      // const yAxisArr = [0, 2.5, 5, 7.5, 10];
      // const seriesArr = [];
      // const yAxisType = "category";
      const normalFontSize = 15;
      const needClear = false;
      this.myChart = this.$echarts.init(document.getElementById("mapbox"));
      this.option = {
        title: {
          text: "",
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          name: "t/s",
          nameTextStyle: {
            fontSize: normalFontSize,
          },
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "w(t)",
          type: this.yAxisType,
          show: true,
          nameTextStyle: {
            fontSize: normalFontSize,
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            show: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr
      }
      this.myChart.setOption(this.option);
    },
    showHelp() {
      this.$weui.alert('<p>1.本实验对一阶系统的单位脉冲响应进行仿真;</p><p>2.用户仅能改变时间常数;</p><p>3.用户在同一实验中按“提交”按钮可以输入多个不同系统的时间常数，用户最多可更改参数的次数为5次;</p><p>4.用户按“仿真”按钮，系统进行仿真;</p><p>5.按“清除”按钮清除参数和仿真结果，可以重新输入参数和仿真。</p>',{
          title: '帮助',
          className: 'help',
          buttons: [{
              label: '确定',
              type: 'primary',
              onClick: function(){ console.log('ok') }
          }]
      })
    },
    submit() {
      if(this.seriesArr.length) {
        Toast.fail('请先点击清除按钮')
        return
      }
      if(this.TArr.length >= 5) {
        return
      }
      if(!this.TNumber || this.TNumber<0) {
        Toast.fail('T值不合法')
        return
      }
      this.TArr.push(this.TNumber)
    },
    clearData() {
      // window.location.reload()
      this.TNumber = 0.1
      this.TArr = []
      this.myChart = null
      this.option = null
      this.yAxisType = 'category'
      this.yAxisArr = [0, 2.5, 5, 7.5, 10]
      this.xAxisArr = [0, 0.1, 0.2, 0.3, 0.4]
      this.seriesArr = []
      this.$echarts.init(this.$refs.mapbox).dispose()
      this.$nextTick(() => {
        this.initChart()
      })
    },
    run() {
      const that = this
      if(this.seriesArr.length) {
        Toast.fail('请先点击清除按钮')
        return
      }
      if(this.TArr.length < 1) {
        Toast.fail('请先提交T值')
        return
      }
      // 根据输入T的最大值设置横坐标
      this.xAxisArr = []
      let TArrMap = (JSON.parse(JSON.stringify(this.TArr))).sort()
      const maxT = TArrMap[TArrMap.length - 1]
      for(let i=0;i<5;i++) {
        this.xAxisArr.push((maxT * i).toFixed(2))
      }
      // 计算每个T值的线条数据
      this.TArr.forEach((item, index) => {
        let lineData = that.xAxisArr.map((child) => {
          return (1/item) * (Math.pow(Math.E, -(child/item))).toFixed(4)
        })
        that.seriesArr.push({
          data: lineData,
          type: "line",
          showSymbol: false,
          smooth: true,
          lineStyle: {
            color: that.colorArr[index],
          }
        })
      })
      // this.option.xAxis.data = this.xAxisArr
      // this.option.yAxis.type = 'value'
      this.yAxisType = 'value'
      console.log(this.option)
      this.$echarts.init(this.$refs.mapbox).dispose()
      this.myChart.dispose()
      // this.myChart.setOption(this.option)
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
.line-box p{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-box p span:first-child{
  color: #333;
  width: 12vw;
  overflow: hidden;
  line-height: 0.4rem;
  font-size: 0.45rem;
  margin-right: 12px;
}
.line-box p span:last-child{
  width: 10vw;
  height: 4px;
  display: inline-block;
}
</style>